<template>
  <div>
    <h1>App组件</h1>
    <!-- ref属性作用：引用DOM或组件 -->

    <!-- ref引用DOM节点 -->
    <h1 ref="h1Ele">hello world</h1>

    <!-- ref引用组件实例 -->
    <button @click="setUserName">使用子组件中的函数</button>
    <ChildCom ref="ChildCom" />
  </div>
</template>

<script setup>
import { onMounted, useTemplateRef } from "vue";
import ChildCom from "./ChildCom.vue";

const h1EleRef = useTemplateRef("h1Ele");
const ChildComRef = useTemplateRef("ChildCom");

const setUserName = () => {
  ChildComRef.value.setUserName();
};

onMounted(() => {
  console.log(h1EleRef.value.innerText);

  //获取组件实例
  console.log(ChildComRef.value.firstName);
  console.log(ChildComRef.value.secodName);
  console.log(ChildComRef.value.lastName);
});
</script>

<style  scoped>
</style>